<script setup lang="ts">
import { ref, toRefs, reactive, toRef, computed, watch } from "vue";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import _ from "lodash";
import assets from "@/utils/assets";

let props = defineProps([
  "placeholder",
  "label",
  "province",
  "city",
  "district",
]);

let emit = defineEmits(["update:province", "update:city", "update:district"]);

let { placeholder, label } = toRefs(props);
let province = toRef(props, "province");
let city = toRef(props, "city");
let district = toRef(props, "district");

let handleFieldChange = (evt: any) => {
  let detail = _.get(evt, "detail");
  let value = _.get(detail, "value");
  emit("update:province", _.get(value, `[0]`));
  emit("update:city", _.get(value, `[1]`));
  emit("update:district", _.get(value, `[2]`));
};
</script>

<template>
  <div class="form-item">
    <span class="name">{{ label }}</span>
    <picker
      mode="region"
      :value="[province, city, district]"
      @change="handleFieldChange"
      class="picker-box"
    >
      <div class="picker-content">
        <view class="picker-name" v-if="province"
          >{{ province }}{{ city }}{{ district }}</view
        >
        <view v-else class="picker-name-empty"> {{ placeholder }} </view>
        <img :src="assets.arrow_right" class="arrow_right" />
      </div>
    </picker>
  </div>
</template>

<style lang="less" scoped>
.form-item {
  padding: 0 34rpx;
  padding-right: 0rpx;
  height: 112rpx;
  border-bottom: 1rpx solid #ededed;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.form-item:last-child {
  border-bottom: none;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  margin-right: 8rpx;
  white-space: nowrap;
}
.picker-box {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30rpx;
  box-sizing: border-box;
}
.picker-content {
  min-width: 400rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.picker-name {
  height: 80rpx;
  line-height: 80rpx;
  flex: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  margin-right: 8rpx;
}
.picker-name-empty {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #999999;
  margin-right: 8rpx;
}
.arrow_right {
  width: 40rpx;
  height: 40rpx;
}
</style>
